﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>使用jQuery修改元素的属性</title>
</head>
<body>
    <input type="button" value="设置图片属性" onclick="setImgAttribute()" />
    <img id="img1" width="80" height="80" src="images/android.png" />
    <br />
    <input type="button" value="使用each修改图片的属性" onclick="testEach()" />
    <span id="imgs">
        <a href="#"><img src="images/android.png"/></a>
        <a href="#"><img src="images/apple.png"/></a>
        <a href="#"><img src="images/cloud.png"/></a>
        <a href="#"><img src="images/dotnet.png"/></a>
    </span>
    <br />
    <input type="button" value="设置Html属性" onclick="setHtml()" />
    <span id="spn1"></span>
    <br />
    <input type="button" value="添加子元素" onclick="appendElement()" />
    <span id="spn3"></span>
    <br />
    <input type="button" value="将元素嵌入到另一元素中" onclick="wrapElement()" />
    <span id="spn4">Microsoft: Windows Azure, Bing, Windows Phone, Office 365</span>
    <br />
    <input type="button" value="在元素前、后添加新元素" onclick="insertElement()" />
    <span id="spn5">Google: App Engine, Google Search, Android, Google Docs</span>

    <script type="text/javascript" src="scripts/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // 将id为"imgs"的元素下所有img元素的宽和高均设置为80
            $('#imgs img').each(function (index, item) {
                $(item).width(80);
                $(item).height(80);
            });
        });
        function setImgAttribute() {
            $('#img1').attr("src", "images/apple.png");     //把"img1"元素的src属性修改为另一副图片路径
            var picname = $('#img1').attr("src");           //获取src属性值
            $('#img1').attr("title", picname);              //设置title属性值
        }
        function testEach() {
            // 批量修改每个img元素的title为其对应的src属性值。
            $('#imgs img').each(function (index, item) {
                //只有jQuery包装对象才能调用attr函数。
                //而each函数中的参数item没有被包装，需要使用$(item)进行包装
                $(item).attr("title", $(item).attr("src"));
            });
        }
        function setHtml() {
            $('#spn1').html("<B>Hello</B>" + $('#spn1').html());    //设置"spn1"元素的html属性
            // 也可尝试修改text属性:
            //$('#spn1').text("<B>Hello</B>" + $('#spn1').text());
        }
        function appendElement() {
            //向"spn3"元素内部添加img子元素
            $('#spn3').append("<img src='images/java.png' widht='80' height='80'/>");
            $('#spn3').append("more pictures will be here:");
            $('#spn3').append($('#imgs'));                      // 将把imgs元素移动到spn3下
            // 也可尝试拷贝元素
            //$('#spn3').append($('#img1').clone());            // 将把img1元素拷贝到spn3下
        }
        function wrapElement() {
            //把"spn4"元素移到<h1>元素内部
            $('#spn4').wrap("<h1></h1>");
        }
        function insertElement() {
            $('#spn5').before("<B>Microsoft.</B>");  //把<B>元素中的内容添加到"spn5"元素的前面
            $('#spn5').after("<B>Oracle.</B>");
        }
    </script>
</body>
</html>
